<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SingUp</title>
    <link rel="stylesheet" href="./css/login_singup.css">
    <script src="./js/jquery.min.js"></script>
    <script src="js/logout.js"></script>
</head>

<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">Sing Up</div>
            <div class="form-wrapper">
                <input id="username" type="text" name="username" placeholder="手机号" class="input-item">
                <input id="password" type="password" name="password" placeholder="密码" class="input-item">
                <input id="password2" type="password" name="password2" placeholder="确认密码" class="input-item">
                <button class="btn" id="submit" onclick="submit()">Sing Up</button>
            </div>
        </div>
    </div>
    <script>
        function submit() {
            // 1. 进行非空校验
            let username = jQuery("#username");
            let password = jQuery("#password");
            let password2 = jQuery("#password2")

            if (username.val().trim() == "") {
                alert("请输入手机号");
                username.focus();
                return false;
            }
            if (password.val().trim() == "") {
                alert("请输入密码");
                username.focus();
                return false;
            }
            for (let i = 0; i < username.val().trim().length; i++) {
                if (isNaN(Number(username.val().trim()[i])) || username.val().trim()[i] == ' ') {
                    alert("手机号中出现非法字符!");
                    username.focus();
                    return false;
                }
            }
            if (username.val().trim().length != 11) {
                alert("请输入 11 位有效的手机号");
                username.focus();
                return false;
            }
            if (password2.val().trim() == "") {
                alert("确认密码为空");
                password2.focus();
                return false;
            }
            if (password.val() != password2.val()) {
                alert("两次输入密码不一致!");
                password.focus();
                return false;
            }
            // 2. 先把提交按钮设置成不可点击状态
            jQuery("#submit").attr("disabled", "disabled");
            
            jQuery.ajax({
                type: 'post',
                url: '/user/reg',
                data: {
                    "username": username.val(),
                    "password": password.val(),
                    "password2": password.val(),
                },
                success: function (body) {
                    if (body.userid <= 0) {
                        alert("手机号已被注册!");
                        jQuery("#submit").removeAttr("disabled");
                    } else {
                        alert("注册成功!");
                        // 跳转到登录页面
                        location.href = "login.html";
                    }
                }
            });
        }
    </script>
</body>

</html>